<template>
    <!-- 商户列表 -->
    <div class="get_date">
            <div class="tabs minWidth">
                  日报
            </div>
            <div class="seach_box">
                    <ul class="seach">
                            <li class="seach_li">
                                    <span class="seach_title">日期</span>
                                    <a-date-picker
                                            v-model:value="pages.date"
                                            class="width180"/>
                            </li>
                            <li class="seach_li">
                                    <span class="seach_title">应用</span>
                                    <a-select
                                            v-model:value="pages.opction"
                                            class="width180"
                                            placeholder="请选择应用"
                                    >
                                            <a-select-option :value="item.id" v-for="(item,index) in opctions" :key="index">{{item.name}}</a-select-option>
                                    </a-select>
                            </li>
                            <li class="seach_li">
                                    <span class="seach_title">组件</span>
                                    <a-input v-model:value="pages.template"  class="width180" placeholder="请输入组件" />
                            </li>
                            <li class="seach_li">
                                    <span class="seach_title">委托方式</span>
                                    <a-select
                                            v-model:value="pages.type"
                                            class="width180"
                                            placeholder="请选择委托方式"
                                    >
                                            <a-select-option :value="item.id" v-for="(item,index) in types" :key="index">{{item.name}}</a-select-option>
                                    </a-select>
                            </li>

                            <li class="seach_li">
                                    <span class="seach_title">报表名称</span>
                                    <a-select
                                            v-model:value="pages.reportType"
                                            class="width180"
                                            placeholder="请选择报表名称"
                                    >
                                            <a-select-option :value="item.id" v-for="(item,index) in reportTypes" :key="index">{{item.name}}</a-select-option>
                                    </a-select>
                            </li>
                            <li class="seach_li">
                                    <span class="seach_title"></span>
                                    <div class="width180">
                                            <a-button @click="seach">查询</a-button>
                                            <a-button class="marginLeft" @click="updataPDF">下载PDF</a-button>
                                    </div>

                            </li>
                    </ul>
            </div>

        <!--<div class="seach_bnt">-->
                 <!--<a-button type="primary" style="margin-left: 10px" @click="seach">查询</a-button>-->
                  <!--<a-button type="primary" style="margin-left: 10px" @click="updataPDF">下载PDF</a-button>-->
        <!--</div>-->
        <div class="table">
            <a-table
                    :columns='columns'
                    :bordered="true"
                    :data-source="lists"
                    :pagination="false"
                    :loading="loading"
                    :rowKey="record => record.id?record.id:'0'"
            >
                    <template v-slot:index="{index}">
                            {{index+1}}
                    </template>

            </a-table>
            <Paginatoion :total='total' :getList='getList' :pages='pages'/>
        </div>

    </div>
</template>

<script>
    import { onMounted,ref,reactive,toRefs,computed } from 'vue';
    import { useStore } from "vuex";
    import {useRouter } from 'vue-router'
    import Paginatoion from '@/components/pagination.vue'
    import { message } from 'ant-design-vue';
    import moment from 'moment'
    export default {
        name:'GetDate',
        components: {
            Paginatoion,
        },

        setup(cex){
            const columns = [
                {title: '序号',dataIndex: 'index', width: 100,slots: { customRender: 'index' },ellipsis:true},
                {title: '名字',dataIndex: 'name', width: 100,ellipsis:true},
                {title: '名称',dataIndex: 'title', width: 100,ellipsis:true},
                {title: '内容',dataIndex: 'val', width: 100,ellipsis:true},
                {title: '日期',dataIndex: 'date', width: 100,ellipsis:true},
            ];
            const router = useRouter();
            const store = useStore();
            const state =reactive({
                value1:'',
                columns,
                lists:[
                    {
                        id:'1',
                        name:'测试数据',
                        val:'测试数据',
                        title:'测试数据',
                        date:'2021-3-15',
                    },
                    {
                        id:'2',
                        name:'测试数据',
                        val:'测试数据',
                        title:'测试数据',
                        date:'2021-3-15',
                    },
                    {
                        id:'3',
                        name:'测试数据',
                        val:'测试数据',
                        title:'测试数据',
                        date:'2021-3-15',
                    }
                ],
                total:10000,
                loading: false,
                pages:{
                    "pageNum": 1,
                    "pageSize": 5,
                    opction:'',
                    type:'',
                    reportType:'1',
                    template:'',
                    date: moment('2021-03-14', 'YYYY-MM-DD')
                },
                dates:[
                    {id:'1',name:'2021-3-14'},
                    {id:'2',name:'2021-3-15'},
                    {id:'3',name:'2021-3-16'},
                    {id:'4',name:'2021-3-17'}
                ],
                opctions:[
                    {id:'',name:'全部'},
                    {id:'1',name:'支付宝'}
                ],
                types:[
                    {id:'',name:'全部'},
                    {id:'1',name:'委托方式1'}
                ],
                reportTypes:[
                    {id:'1',name:'报表名称'}
                ],
                visible:false,
            })
            onMounted(()=>{
                getList(state.pages);
            });
            const onSearch=(val)=>{
                getList(state.pages);
            };


            const getList=(data)=>{ //初始化数据
                state.loading = true;

                    state.loading = false;

            };
            const seach=()=>{ //查询
               alert(state.pages.opction+'这是应用'+moment(state.pages.date).format('YYYY-MM-DD' +
                   '')+"这是时间")

            };
            const updataPDF=(data)=>{ //下载PDF
            };



            return {
                ...toRefs(state),getList,seach,updataPDF
            }

        }

    }
</script>
<style lang="less" scoped>

.tabs{
        width: 100%;
        line-height: 40px;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 20px;
        background: #f1f1f1;

}
</style>

